<template>
	<view>
		<!-- 新书上架 -->
		<view style="background-color: #FFFFFF;margin-top: 3%;">
			<view class="brief0-introduction">
				<u-cell-group>
					<u-cell title="新书上架" isLink value="更多" :border="false" url="/book/book-list/index?type=1"></u-cell>
				</u-cell-group>
			</view>
			<view style="width: 100%; display: flex; margin-top: 20px; flex-wrap: wrap;background-color: #FFFFFF;">
				<view class="like-book" v-for="(book, index) in newList" :key="book.id">
					<image v-if="book.photo != null" style="width: 100%; height: 75%" :src="book.photo"
						@click="bookDetail(book.id)"></image>
					<view v-if="book.photo == null" style="
							width: 100%;
							height: 70%;
							display: flex;
							justify-content: center;
							flex-direction: column;
							background-color: lightgrey;
							font-size: 18px;
							align-items: center;
						" @click="bookDetail(book.id)">
						暂无图片
					</view>
					<text class="like-book-name">{{ book.name }}</text>
					<text class="like-book-author">{{ book.author }}</text>
				</view>
			</view>
		</view>

		<!-- 馆长推荐 -->
		<view style="background-color: #FFFFFF;margin-top: 3%;">
			<view class="brief0-introduction">
				<u-cell-group>
					<u-cell title="馆长推荐" isLink value="更多" :border="false" url="/book/book-list/index?type=2"></u-cell>
				</u-cell-group>
			</view>
			<view
				style="width: 100%; margin-left: 2%; display: flex; margin-top: 20px; flex-wrap: wrap; background-color: #FFFFFF;">
				<view class="like-book" v-for="(book, index) in recommendList" :key="book.id">
					<image v-if="book.photo != null" style="width: 100%; height: 75%" :src="book.photo"
						@click="bookDetail(book.id)"></image>
					<view v-if="book.photo == null" style="
							width: 100%;
							height: 70%;
							display: flex;
							justify-content: center;
							flex-direction: column;
							background-color: lightgrey;
							font-size: 18px;
							align-items: center;
						" @click="bookDetail(book.id)">
						暂无图片
					</view>
					<text class="like-book-name">{{ book.name }}</text>
					<text class="like-book-author">{{ book.author }} 著</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		newbookList,
		recommendBookList
	} from '@/api/book';
	import config from '@/config';

	export default {
		props: {
			keyword: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				recommendList: [],
				newList: []
			};
		},
		mounted() {
			this.getNewBookList();
			this.getRecommendBookList();
		},
		methods: {
			async getNewBookList() {
				const res = await newbookList();
				if (res.code == 200) {
					this.newList = res.rows;
					this.newList.forEach((item) => {
						if (item.photo != null) {
							item.photo = config.baseUrl + item.photo;
						}
					});
				}
			},

			async getRecommendBookList() {
				const res = await recommendBookList();
				if (res.code == 200) {
					this.recommendList = res.rows;
					this.recommendList.forEach((item) => {
						if (item.photo != null) {
							item.photo = config.baseUrl + item.photo;
						}
					});
				}
			},

			bookDetail(id) {
				uni.navigateTo({
					url: `/book/book-detail/index?bookId=${id}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.brief0-introduction {
		width: 100%;
		height: 7%;
		background-color: #ffffff;
		margin-top: 3%;
		display: flex;
		align-items: center;
	}

	.like-book {
		width: 25%;
		height: 25vh;
		margin-left: 7%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 4%;
	}

	.like-book-name {
		font-weight: bold;
		font-size: 13px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}

	.like-book-author {
		font-size: 10px;
		color: darkgrey;
		overflow: hidden;
		max-width: 100px;
	}
</style>